@import 'styles/ui.module';
@import 'styles/settings';
@import 'styles/typography-extends';

$error-gif-size: 120px;

.container {
  @include backdropBlur();
  border-radius: 2px;
  box-shadow: 0 2px 10px 0 rgba(23,27,48,0.15);
  position: relative;
}

.loading {
  padding: $mobile-sidebar-side-paddings;
  display: flex;
  flex-direction: column;
  align-items: center;

  @media #{$tablet-portrait} {
    padding: $sidebar-paddings;
  }
}

.loadingText {
  color: white;
  font-size: 14px;
  font-weight: 300;
  margin-top: 10px;
}

.errorWrapper {
  height: 110px;
  position: relative;
  width: 100%;
}

.errorText {
  padding: 0 $mobile-sidebar-side-paddings;
  color: white;
  font-size: 14px;
  font-weight: 300;
  margin: 0;

  @media #{$tablet-portrait} {
    padding: 0 $sidebar-paddings;
  }
}

.errorGif{
  height: $error-gif-size;
  width: $error-gif-size;
  margin-left: calc(50% - #{$error-gif-size} / 2);
  position: absolute;
  top: 0;
}

.line {
  height: 1px;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
  width: 100%;
}

.descriptionWrapper {
  @extend %bodyText;
  color: $white;
  padding: $mobile-sidebar-side-paddings;

  @media #{$tablet-portrait} {
    padding: $sidebar-paddings;
    padding-bottom: 24px;
  }

  p {
    margin: 0;
  }
}

.areaText {
  font-weight: $font-weight-bold;
}



